<template>
  <div class="dashboard-page">
    <div class="stat-cards">
      <!-- 用户统计卡片 -->
      <a-card class="stat-card">
        <div class="card-content">
          <div class="card-info">
            <h3 class="card-title">用户总数</h3>
            <div class="card-value">369</div>
            <div class="card-desc">
              <span class="trend up"> <arrow-up-outlined /> 12.5% </span>
              较上月
            </div>
          </div>
          <div class="card-icon teacher">
            <team-outlined />
          </div>
        </div>
        <a-divider style="margin: 16px 0" />
        <div class="card-footer">
          <div class="footer-item">
            <div class="item-label">教师</div>
            <div class="item-value">12</div>
          </div>
          <div class="footer-item">
            <div class="item-label">学生</div>
            <div class="item-value">357</div>
          </div>
        </div>
      </a-card>

      <!-- 活跃度统计 -->
      <a-card class="stat-card">
        <div class="card-content">
          <div class="card-info">
            <h3 class="card-title">今日活跃用户</h3>
            <div class="card-value">28</div>
            <div class="card-desc">
              <span class="trend up"> <arrow-up-outlined /> 8.2% </span>
              较昨日
            </div>
          </div>
          <div class="card-icon active">
            <line-chart-outlined />
          </div>
        </div>
        <a-divider style="margin: 16px 0" />
        <div class="card-footer">
          <div class="footer-item">
            <div class="item-label">教师</div>
            <div class="item-value">10</div>
          </div>
          <div class="footer-item">
            <div class="item-label">学生</div>
            <div class="item-value">18</div>
          </div>
        </div>
      </a-card>

      <!-- 资源统计 -->
      <a-card class="stat-card">
        <div class="card-content">
          <div class="card-info">
            <h3 class="card-title">课件资源总数</h3>
            <div class="card-value">19</div>
            <div class="card-desc">
              <span class="trend up"> <arrow-up-outlined /> 15.3% </span>
              较上月
            </div>
          </div>
          <div class="card-icon resource">
            <folder-outlined />
          </div>
        </div>
        <a-divider style="margin: 16px 0" />
        <div class="card-footer">
          <div class="footer-item">
            <div class="item-label">本周新增</div>
            <div class="item-value">14</div>
          </div>
          <div class="footer-item">
            <div class="item-label">本月新增</div>
            <div class="item-value">19</div>
          </div>
        </div>
      </a-card>

      <!-- 学习效果 -->
      <a-card class="stat-card">
        <div class="card-content">
          <div class="card-info">
            <h3 class="card-title">平均正确率</h3>
            <div class="card-value">76.2%</div>
            <div class="card-desc">
              <span class="trend down"> <arrow-down-outlined /> 2.1% </span>
              较上月
            </div>
          </div>
          <div class="card-icon effect">
            <check-circle-outlined />
          </div>
        </div>
        <a-divider style="margin: 16px 0" />
        <div class="card-footer">
          <div class="footer-item">
            <div class="item-label">最高学科</div>
            <div class="item-value">深度学习(82.5%)</div>
          </div>
          <div class="footer-item">
            <div class="item-label">最低学科</div>
            <div class="item-value">计算机网络(68.3%)</div>
          </div>
        </div>
      </a-card>
    </div>

    <!-- 图表区域 -->
    <div class="chart-section">
      <a-row :gutter="24">
        <a-col :span="16">
          <a-card title="用户使用趋势" class="chart-card fade-in">
            <div ref="userTrendChart" class="chart"></div>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card title="活跃模块分布" class="chart-card fade-in">
            <div ref="activeModuleChart" class="chart"></div>
          </a-card>
        </a-col>
      </a-row>

      <a-row :gutter="24" style="margin-top: 24px">
        <a-col :span="12">
          <a-card title="教学效率指数" class="chart-card fade-in">
            <div ref="teachingEfficiencyChart" class="chart"></div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="学科正确率对比" class="chart-card fade-in">
            <div ref="subjectComparisonChart" class="chart"></div>
          </a-card>
        </a-col>
      </a-row>

      <!-- 高频错误知识点统计图表 -->
      <a-row :gutter="24" style="margin-top: 24px">
        <a-col :span="24">
          <a-card title="高频错误知识点" class="chart-card fade-in">
            <div ref="errorKnowledgeChart" class="chart"></div>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <ToTop/>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import {
  TeamOutlined,
  LineChartOutlined,
  FolderOutlined,
  CheckCircleOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
} from '@ant-design/icons-vue'
import ToTop from '@/components/ToTop.vue'

// 图表DOM引用
const userTrendChart = ref<HTMLElement | null>(null)
const activeModuleChart = ref<HTMLElement | null>(null)
const teachingEfficiencyChart = ref<HTMLElement | null>(null)
const subjectComparisonChart = ref<HTMLElement | null>(null)
const errorKnowledgeChart = ref<HTMLElement | null>(null)

// 图表实例
let userTrendChartInstance: echarts.ECharts | null = null
let activeModuleChartInstance: echarts.ECharts | null = null
let teachingEfficiencyChartInstance: echarts.ECharts | null = null
let subjectComparisonChartInstance: echarts.ECharts | null = null
let errorKnowledgeChartInstance: echarts.ECharts | null = null

onMounted(() => {
  initCharts()

  // 监听窗口大小变化，重绘图表
  window.addEventListener('resize', handleResize)
})

// 初始化图表
function initCharts() {
  // 用户使用趋势图
  if (userTrendChart.value) {
    userTrendChartInstance = echarts.init(userTrendChart.value)
    userTrendChartInstance.setOption({
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['教师访问量', '学生访问量'],
        textStyle: {
          color: '#333',
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '教师访问量',
          type: 'line',
          data: [120, 132, 101, 134, 90, 30, 20],
          smooth: true,
          lineStyle: {
            width: 3,
            color: '#1890ff',
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(24,144,255,0.3)' },
              { offset: 1, color: 'rgba(24,144,255,0.1)' },
            ]),
          },
        },
        {
          name: '学生访问量',
          type: 'line',
          data: [220, 182, 191, 234, 290, 330, 310],
          smooth: true,
          lineStyle: {
            width: 3,
            color: '#52c41a',
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(82,196,26,0.3)' },
              { offset: 1, color: 'rgba(82,196,26,0.1)' },
            ]),
          },
        },
      ],
    })
  }

  // 活跃模块分布
  if (activeModuleChart.value) {
    activeModuleChartInstance = echarts.init(activeModuleChart.value)
    activeModuleChartInstance.setOption({
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        textStyle: {
          color: '#333',
        },
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: '备课与设计' },
            { value: 735, name: '考核内容生成' },
            { value: 580, name: '学情数据分析' },
            { value: 484, name: '在线学习助手' },
            { value: 300, name: '实时练习评测' },
            { value: 300, name: '智能生成PPT' },
            { value: 200, name: '智能生成知识图谱' },
          ],
        },
      ],
    })
  }

  // 教学效率指数
  if (teachingEfficiencyChart.value) {
    teachingEfficiencyChartInstance = echarts.init(teachingEfficiencyChart.value)
    teachingEfficiencyChartInstance.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        data: ['备课耗时', '修正耗时', '练习设计耗时'],
        textStyle: {
          color: '#333',
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: ['程序与设计', '算法', '数据结构', '操作系统', '嵌入式', '深度学习', '计算机网络'],
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '耗时(分钟)',
          nameTextStyle: {
            color: '#333',
          },
        },
      ],
      series: [
        {
          name: '备课耗时',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series',
          },
          data: [320, 302, 341, 374, 390, 330, 320],
        },
        {
          name: '修正耗时',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series',
          },
          data: [120, 132, 101, 134, 190, 230, 210],
        },
        {
          name: '练习设计耗时',
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series',
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
      ],
    })
  }

  // 学科正确率对比
  if (subjectComparisonChart.value) {
    subjectComparisonChartInstance = echarts.init(subjectComparisonChart.value)
    subjectComparisonChartInstance.setOption({
      tooltip: {
        trigger: 'axis',
      },
      radar: {
        indicator: [
          { name: '程序与设计', max: 100 },
          { name: '算法', max: 100 },
          { name: '数据结构', max: 100 },
          { name: '操作系统', max: 100 },
          { name: '嵌入式', max: 100 },
          { name: '深度学习', max: 100 },
          { name: '计算机网络', max: 100 },
        ],
        splitArea: {
          areaStyle: {
            color: [
              'rgba(250, 250, 250, 0.3)',
              'rgba(200, 200, 200, 0.3)',
              'rgba(150, 150, 150, 0.3)',
            ],
          },
        },
      },
      series: [
        {
          name: '平均正确率',
          type: 'radar',
          data: [
            {
              value: [75, 82, 68, 70, 78, 80],
              name: '本月',
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(24,144,255,0.4)' },
                  { offset: 1, color: 'rgba(24,144,255,0.1)' },
                ]),
              },
            },
            {
              value: [72, 80, 70, 68, 75, 75],
              name: '上月',
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(82,196,26,0.4)' },
                  { offset: 1, color: 'rgba(82,196,26,0.1)' },
                ]),
              },
            },
          ],
        },
      ],
    })
  }

  // 高频错误知识点统计图表
  if (errorKnowledgeChart.value) {
    errorKnowledgeChartInstance = echarts.init(errorKnowledgeChart.value)
    errorKnowledgeChartInstance.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
      },
      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
      xAxis: {
        type: 'category',
        data: ['二叉树', '动态规划', 'TCP三次握手', '面向对象的编程思想', '模型和层', '张量', '树的遍历'],
        axisTick: { alignWithLabel: true },
      },
      yAxis: {
        type: 'value',
        name: '错误次数',
      },
      series: [
        {
          name: '错误次数',
          type: 'bar',
          barWidth: '60%',
          data: [32, 28, 25, 22, 20, 18, 15],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#f5222d' },
              { offset: 1, color: '#faad14' },
            ]),
            borderRadius: [6, 6, 0, 0],
          },
        },
      ],
    })
  }
}

// 处理窗口大小变化
function handleResize() {
  userTrendChartInstance?.resize()
  activeModuleChartInstance?.resize()
  teachingEfficiencyChartInstance?.resize()
  subjectComparisonChartInstance?.resize()
  errorKnowledgeChartInstance?.resize()
}
</script>

<style scoped>
.dashboard-page {
  padding-top: 32px;
  width: 100%;
  background: #f5f6fa;
  min-height: 100vh;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}

.stat-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  transition:
    box-shadow 0.3s,
    transform 0.3s;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(30px);
  animation: card-fade-in 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  border: none;
}
.stat-card:hover {
  box-shadow: 0 8px 32px rgba(24, 144, 255, 0.18);
  transform: translateY(-6px) scale(1.035);
}

@keyframes card-fade-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.8s 0.1s forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-info {
  flex: 1;
}

.card-title {
  margin: 0 0 8px;
  font-size: 18px;
  color: #222;
  font-weight: 600;
}

.card-value {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #222;
  transition:
    color 0.3s,
    transform 0.3s;
  animation: value-pop 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  letter-spacing: 1px;
}
@keyframes value-pop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  80% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.card-desc {
  font-size: 14px;
  color: #888;
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.card-icon.teacher {
  background: linear-gradient(135deg, #1890ff, #36cfc9);
}
.card-icon.active {
  background: linear-gradient(135deg, #52c41a, #b7eb8f);
}
.card-icon.resource {
  background: linear-gradient(135deg, #722ed1, #b37feb);
}
.card-icon.effect {
  background: linear-gradient(135deg, #fa8c16, #ffd666);
}

.trend {
  margin-right: 4px;
  font-weight: bold;
  display: inline-block;
  animation: trend-bounce 1.2s infinite alternate;
}
@keyframes trend-bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-4px) scale(1.08);
  }
}
.trend.up {
  color: #52c41a;
}
.trend.down {
  color: #f5222d;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.footer-item {
  text-align: center;
  flex: 1;
}

.item-label {
  font-size: 14px;
  color: #888;
  margin-bottom: 4px;
}

.item-value {
  font-size: 18px;
  font-weight: 500;
  color: #222;
}

.chart-section {
  margin-top: 8px;
}

.chart-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 0;
  transition: box-shadow 0.3s;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: none;
}
.chart-card.fade-in {
  opacity: 0;
  animation: fadeIn 0.8s 0.2s forwards;
}

.chart {
  height: 300px;
  width: 100%;
  opacity: 0;
  animation: chart-fade-in 1s 0.2s forwards;
}
@keyframes chart-fade-in {
  to {
    opacity: 1;
  }
}

/* 图表 legend 颜色优化建议：在 ECharts option 里设置 legend.textStyle.color 与主色一致 */

/* 响应式优化 */
@media (max-width: 1200px) {
  .stat-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .chart {
    height: 220px;
  }
}
@media (max-width: 768px) {
  .stat-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .chart-section {
    margin-top: 0;
  }
  .chart {
    height: 180px;
  }
}
</style>
